
<template>
  <div>
    <vxe-modal
      v-model="value"
      v-if="value"
      :loading="loading"
      :ref="dialogRef"
      :width="width"
      :height="height"
      :min-width="minWidth"
      :min-height="minHeight"
      :resize="resize"
      :fullscreen="fullscreen"
      :transfer="transfer"
      :remember="remember"
      :storage="storage"
      :show-footer="showFooter"
      :top="top"
      :lock-view="lockView"
      :lock-scroll="lockScroll"
      :zIndex="zIndex"
      @close="closeCurrentModal"
      @confirm="confirmCurrentModal"
      @hide="hideCurrentModal"
      @show="showCurrentModal"
    >
      <template v-slot:title>
        <span>{{ title }}</span>
      </template>
      <slot name="dialogContent"></slot>
      <span slot="footer" v-if="isSelfFooter">
        <slot name="footerContent"></slot>
        <vxe-button type="primary" v-for="item in footBtnList" :key="item.action" @click="footBtnClick(item.action)" :disabled="item.disabled" size="small">{{item.name}}</vxe-button>
      </span>
    </vxe-modal>
  </div>
</template>

<script>
export default {
  name: "vxeDialog",
  props: {
    //自定义ref
    dialogRef: {
      type: String,
      default() {
        return "vxeDialog";
      },
    },
    title: {
      type: String,
      default() {
        return "标题";
      },
    },
    width: {
      //设置窗口宽度
      type: [String,Number],
      default() {
        return "80%";
      },
    },
    height: {
      //设置窗口高度
      type: [String,Number],
      default() {
        return "90%";
      },
    },
    minWidth: {
      //设置窗口最小宽度
      type: [String,Number],
      default() {
        return "300px";
      },
    },
    minHeight: {
      //设置窗口最小高度
      type: [String,Number],
      default() {
        return "200px";
      },
    },
    zIndex: {
      //自定义堆叠顺序
      type: [Number],
      default() {
        return null;
      },
    },
    top: {
      //设置窗口位置
      type: String,
      default() {
        return "50%";
      },
    },
    lockView: { //是否锁住页面，不允许窗口之外的任何操作
      type: Boolean,
      default() {
        return true;
      }
    },
    lockScroll: { //是否锁住滚动条，不允许页面滚动
      type: Boolean,
      default() {
        return true;
      }
    },
    isShowWin: {//是否显示弹框
      type: Boolean,
      default() {
        return false;
      },
    },
    // 调整大小
    resize: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 窗口最大化
    fullscreen: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 通过设置 transfer 将弹框容器插入 body
    transfer: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 记忆功能
    remember: {
      type: Boolean,
      default() {
        return false;
      },
    },
    storage: {//是否启用 localStorage 本地保存，会将窗口拖动的状态保存到本地
      type: Boolean,
      default() {
        return false;
      },
    },
    showFooter: {//是否显示底部
      type: Boolean,
      default() {
        return false;
      },
    },
    isSelfFooter: {//是否自定义底部按钮
      type: Boolean,
      default() {
        return false;
      },
    },
    footBtnList: {
      type: Array,
      default() {
        return [
          { name: '确定', action: 'sure' },
          { name: '关闭', action: 'close' }
        ]
      }
    },
    loading: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  components: {},
  data() {
    return {
      value: false,
    };
  },
  watch: {
    isShowWin: {
      handler(newVal, objVal) {
        this.value = newVal;
      },
      deep: true,
      immediate: true,
    },
    value: {
      handler(newVal, objVal) {
        this.$emit("update:isShowWin", newVal);
      },
      deep: true,
      immediate: true,
    },
  },

  created() {},
  mounted() {},
  methods: {
    closeCurrentModal({ type, $event }) {
      // 当前组件关闭窗口方法
      this.$emit("modalClose", { type, $event });
    },
    confirmCurrentModal({ type, $event }) {
      //点击确定按钮时会触发该事件
      this.$emit("modalConfirm", { type, $event });
    },
    hideCurrentModal({ type, $event }) {
      //在窗口关闭时会触发该事件
      this.$emit("modalHide", { type, $event });
    },
    showCurrentModal({ type, $event }) {
      //窗口显示时会触发的方法
      this.$emit("modalShow", { type, $event });
    },
    footBtnClick(action) { //"sure" "close"
      if ((action == "close")) {
        this.$refs[this.dialogRef].close();
      }
       this.$emit("footBtnClickCallback", action);
    },
  },
};
</script>
<style lang="less">

</style>
